<template>
  <initVantaWaves />
  <div class="download-container">
    <h1>自动化工具平台下载</h1>
    <div class="download-card">
      <el-card shadow="hover">
        <template #header>
          <div class="card-header">
            <span>Windows 版本</span>
            <el-tag type="success">最新版本 v{{ version }}</el-tag>
          </div>
        </template>
        
        <div class="download-info">
          <el-icon :size="20"><Platform /></el-icon>
          <span>支持 Windows 11 及以上系统</span>
        </div>
        
        <el-button 
          type="primary" 
          size="large"
          @click="startDownload"
          :loading="downloading">
          {{ downloading ? '下载中...' : '立即下载' }}
        </el-button>
      </el-card>

      <div class="checksum">
        <el-text type="info">
          SHA256: {{ sha256 }} <el-icon class="copy-icon" @click="copyChecksum"><CopyDocument /></el-icon>
        </el-text>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { Platform, CopyDocument } from '@element-plus/icons-vue';
import initVantaWaves from '../components/initVantaWaves.vue';

// 配置服务器下载地址
const DOWNLOAD_URL = 'http://10.169.128.20/files/automation-tools-platform/automation-tools-platform Setup 0.0.5.exe';
const SHA256 = 'xxxx...';

const version = ref('0.0.5');
const sha256 = ref(SHA256);
const downloading = ref(false);

const startDownload = () => {
  downloading.value = true;
  const link = document.createElement('a');
  link.href = DOWNLOAD_URL;
  link.download = 'AutomationToolsPlatform_Setup.exe';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  
  // 模拟下载完成
  setTimeout(() => {
    downloading.value = false;
    ElMessage.success('下载已开始，如未自动下载请检查浏览器拦截');
  }, 1000);
};

const copyChecksum = () => {
  navigator.clipboard.writeText(sha256.value)
    .then(() => ElMessage.success('校验码已复制'))
    .catch(() => ElMessage.error('复制失败'));
};
</script>

<style scoped lang="less">
.download-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;

  h1 {
    text-align: center;
    color: #fff;
    margin-bottom: 2rem;
  }
}

.download-card {
  .el-card {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .download-info {
    margin: 1rem 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #666;
  }

  .checksum {
    margin-top: 1.5rem;
    text-align: center;
    
    .copy-icon {
      margin-left: 8px;
      cursor: pointer;
      &:hover {
        color: var(--el-color-primary);
      }
    }
  }
}
</style>
